<template>
  <div class="recipe-detail" v-loading="loading">
    <el-card v-if="recipe" class="detail-card">
      <div class="recipe-header">
        <div class="recipe-info">
          <h2>{{ recipe.name }}</h2>
          <div class="recipe-meta">
            <span>
              <el-icon><Timer /></el-icon>
              烹饪时间：{{ recipe.cookingTime }}分钟
            </span>
            <span>
              <el-icon><Star /></el-icon>
              热量：{{ recipe.calories }}千卡
            </span>
            <span>
              <el-icon><Histogram /></el-icon>
              难度：{{ recipe.difficulty }}
            </span>
          </div>
        </div>
        <div class="recipe-actions">
          <el-button
            :type="recipe.favorite ? 'danger' : 'primary'"
            :icon="recipe.favorite ? Delete : Plus"
            @click="handleFavorite"
            :loading="favoriteLoading"
          >
            {{ recipe.favorite ? '取消收藏' : '收藏' }}
          </el-button>
        </div>
      </div>

      <el-divider />

      <div class="recipe-content">
        <div class="recipe-image">
          <el-image
            :src="recipe.imageUrl"
            fit="cover"
          >
            <template #error>
              <div class="image-placeholder">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>

        <div class="recipe-description">
          <h3>简介</h3>
          <p>{{ recipe.description }}</p>
        </div>

        <div class="recipe-ingredients">
          <h3>食材</h3>
          <el-table :data="recipe.ingredients" border>
            <el-table-column prop="food.name" label="食材名称" />
            <el-table-column prop="quantity" label="用量">
              <template #default="{ row }">
                {{ row.quantity }}{{ row.unit }}
              </template>
            </el-table-column>
            <el-table-column label="营养成分">
              <template #default="{ row }">
                <div class="nutrition-info">
                  <span>热量: {{ row.food.calories }}千卡</span>
                  <span>蛋白质: {{ row.food.protein }}g</span>
                  <span>碳水: {{ row.food.carbohydrates }}g</span>
                  <span>脂肪: {{ row.food.fat }}g</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="recipe-instructions">
          <h3>烹饪步骤</h3>
          <div class="instructions-content">
            {{ recipe.instructions }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Timer, Star, Picture, Plus, Delete, Histogram } from '@element-plus/icons-vue'
import { getRecipeDetail, addFavorite, removeFavorite } from '@/api/recipe'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const favoriteLoading = ref(false)
const recipe = ref(null)
const userId = localStorage.getItem('userId')

// 获取食谱详情
const fetchRecipeDetail = async () => {
  loading.value = true
  try {
    const response = await getRecipeDetail(route.params.id)
    if (response?.success) {
      recipe.value = response.data
    } else {
      ElMessage.error(response?.message || '获取食谱详情失败')
    }
  } catch (error) {
    console.error('获取食谱详情失败:', error)
    ElMessage.error('获取食谱详情失败')
  } finally {
    loading.value = false
  }
}

// 处理收藏/取消收藏
const handleFavorite = async () => {
  try {
    if (!userId) {
      ElMessage.warning('请先登录')
      router.push('/login')
      return
    }

    favoriteLoading.value = true
    if (recipe.value.favorite) {
      await removeFavorite(recipe.value.recipeId, { userId: parseInt(userId) })
      ElMessage.success('取消收藏成功')
    } else {
      const response = await addFavorite(recipe.value.recipeId, { userId: parseInt(userId) })
      if (!response?.success) {
        throw new Error(response?.message || '收藏失败')
      }
      ElMessage.success('收藏成功')
    }
    recipe.value.favorite = !recipe.value.favorite
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error(error.message || (recipe.value.favorite ? '取消收藏失败' : '收藏失败'))
  } finally {
    favoriteLoading.value = false
  }
}

onMounted(() => {
  fetchRecipeDetail()
})
</script>

<style lang="scss" scoped>
.recipe-detail {
  padding: 20px;

  .detail-card {
    max-width: 1200px;
    margin: 0 auto;
  }

  .recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .recipe-info {
      h2 {
        margin: 0 0 16px;
      }

      .recipe-meta {
        display: flex;
        gap: 24px;
        color: var(--el-text-color-secondary);

        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }

  .recipe-content {
    .recipe-image {
      margin-bottom: 24px;

      .el-image {
        width: 100%;
        height: 400px;
        border-radius: 8px;
      }

      .image-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--el-fill-color-light);
        color: var(--el-text-color-secondary);
        font-size: 48px;
      }
    }

    h3 {
      margin: 24px 0 16px;
      font-size: 18px;
      font-weight: bold;
    }

    .recipe-description {
      p {
        margin: 0;
        line-height: 1.6;
        color: var(--el-text-color-regular);
      }
    }

    .recipe-ingredients {
      .nutrition-info {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }

    .recipe-instructions {
      .instructions-content {
        white-space: pre-wrap;
        line-height: 1.8;
        color: var(--el-text-color-regular);
      }
    }
  }
}

@media (max-width: 768px) {
  .recipe-detail {
    padding: 10px;

    .recipe-header {
      flex-direction: column;
      gap: 16px;

      .recipe-meta {
        flex-wrap: wrap;
      }

      .recipe-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }

    .recipe-content {
      .recipe-image {
        .el-image {
          height: 200px;
        }
      }
    }
  }
}
</style> 